let layer;
let form;
layui.use(['layer', 'form'], function () {
    layer = layui.layer
    form = layui.form

    function list() {
        $.ajax({
            url: "/my/article/cates",
            success: function (res) {
                if (res.status == 0) {
                    $("tbody").html("");
                    $.each(res.data, function (index, item) {
                        let one = $(`<tr>
                        <td>${item.name}</td>
                        <td>${item.alias}</td>
                        <td>
                          <button type="button" class="layui-btn layui-btn-xs btn-edit" _id=${item.Id} _name=${item.name} _alias=${item.alias}>编辑</button>
                          <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete" _id=${item.Id}>删除</button>
                        </td>
                      </tr>`);

                        $("tbody").append(one);
                    });
                }
            }
        });
    }
    list();



    let add_str = `<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
  <div class="layui-form-item">
    <label class="layui-form-label">类别名称</label>
    <div class="layui-input-block">
      <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">类别别名</label>
    <div class="layui-input-block">
      <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
 </form>`;


    $('.add').on('click', function () {
        let index = layer.open({
            type: 1,
            title: "新增类名",
            content: add_str,
            area: ['500px', '270px'],
        })



        $('#add_form').on('submit', function (e) {
            e.preventDefault()

            let data = $(this).serialize()

            $.ajax({
                url: '/my/article/addcates',
                data: data,
                type: 'POST',
                success: function (res) {
                    layer.msg(res.message)
                    layer.close(index)
                    list()
                }
            })
        })
    })

    $('tbody').on('click', '.btn-delete', function () {
        let id = $(this).attr('_id')

        layer.confirm('确定删除么？', function (index) {
            layer.close(index);

            $.ajax({
                url: '/my/article/deletecate/' + id,
                success: function (res) {
                    layer.msg(res.message);
                    list()
                }
            })
        })
    });


    let edit_str = `<form class="layui-form edit-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <input type="hidden" name="Id">
        <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
      </div>
    </div>
    </form>`;


    $('tbody').on('click', '.btn-edit', function () {
        let Id = $(this).attr('_id')
        let name = $(this).attr('_name')
        let alias = $(this).attr('_alias')
        let index = layer.open({
            type: 1,
            title: "编辑类名",
            content: edit_str,
            area: ['500px', '270px'],
        })
        form.val('edit', {
            Id: Id,
            name: name,
            alias: alias
        });


        $('#edit_form').on('submit', function (e) {
            e.preventDefault()

            let data = $(this).serialize()

            $.ajax({
                url: '/my/article/updatecate',
                data: data,
                type: 'POST',
                success: function (res) {
                    layer.msg(res.message)
                    layer.close(index)
                    list()
                }
            })
        })

    })

})